<!-- 骨架屏组件使用示例 -->
<script setup lang="ts">
import { ref } from 'vue';
import SkeletonWrapper from './skeleton-wrapper.vue';
import PageSkeleton from './page-skeleton.vue';
import Skeleton from './skeleton.vue';
import HomeSkeleton from './home-skeleton.vue';

// 模拟不同页面的加载状态
const loading = ref(false);
const tableLoading = ref(false);
const cardLoading = ref(false);
const detailLoading = ref(false);
const formLoading = ref(false);
const homeLoading = ref(false);
</script>

<template>
  <div>
    <!-- 1. 使用高阶骨架屏包装组件 -->
    <SkeletonWrapper :loading="loading" type="page" :skeleton-props="{ showFilters: true, showTableHeader: true }">
      <!-- 你的页面内容 -->
      <div class="page-content">
        <!-- 实际的页面内容会在loading为false时显示 -->
      </div>
    </SkeletonWrapper>

    <!-- 2. 直接使用页面骨架屏 -->
    <PageSkeleton
      v-if="loading"
      :show-filters="true"
      :show-table-header="true"
      :show-table="true"
      :columns="6"
      :rows="10"
      :show-pagination="true"
    />

    <!-- 3. 使用基础骨架屏组件 -->
    <Skeleton
      v-if="loading"
      :avatar="true"
      :title="true"
      :paragraph="3"
      title-width="80%"
      :paragraph-width="['100%', '90%', '60%']"
    />

    <!-- 4. 不同页面类型的骨架屏 -->
    <!-- 表格页面 -->
    <PageSkeleton
      v-if="tableLoading"
      :show-title="true"
      :show-filters="true"
      :filter-count="5"
      :show-table-header="true"
      :show-table="true"
      :columns="7"
      :rows="15"
      :show-pagination="true"
    />

    <!-- 卡片列表页面 -->
    <PageSkeleton
      v-if="cardLoading"
      :show-title="true"
      :show-filters="true"
      :show-cards="true"
      :card-count="12"
      :show-pagination="true"
      :show-table="false"
    />

    <!-- 详情页面 -->
    <PageSkeleton
      v-if="detailLoading"
      :show-title="true"
      :show-detail="true"
      :show-table="false"
      :show-pagination="false"
    />

    <!-- 表单页面 -->
    <PageSkeleton
      v-if="formLoading"
      :show-title="true"
      :show-form="true"
      :form-fields="8"
      :show-table="false"
      :show-pagination="false"
    />

    <!-- 5. 首页使用专用骨架屏 -->
    <HomeSkeleton v-if="homeLoading" />
  </div>
</template>

<!--
使用说明：

1. **高阶组件 SkeletonWrapper**
   - 最推荐的使用方式
   - 自动根据loading状态切换显示
   - 支持type属性指定骨架屏类型：'page' | 'home' | 'custom'

2. **页面骨架屏 PageSkeleton**
   - 适用于各种页面布局
   - 支持表格、卡片、详情、表单等多种布局
   - 高度可配置的属性

3. **基础骨架屏 Skeleton**
   - 最简单的骨架屏组件
   - 适用于简单的内容块

4. **首页骨架屏 HomeSkeleton**
   - 专为首页仪表盘设计
   - 完全匹配首页布局结构

5. **常见使用场景**：
   ```typescript
   // 在页面组件中
   const loading = ref(true)
   
   // API调用
   const fetchData = async () => {
     loading.value = true
     try {
       const result = await api.getData()
       // 处理数据
     } finally {
       loading.value = false
     }
   }
   ```

6. **推荐配置**：
   - 列表页面：showFilters + showTableHeader + showTable + showPagination
   - 卡片页面：showCards + showPagination
   - 详情页面：showDetail
   - 表单页面：showForm
-->
